import React from "react";
import { Select } from "antd";
import useArry from "../../../hook/useArry";

function Index() {
  useArry();
  const theme = localStorage.getItem("theme") || "light";
  const handleChange = (value: string) => {
    const htmlNode = document.documentElement;
    htmlNode.setAttribute("data-theme", value);
    localStorage.setItem("theme", value);
  };
  return (
    <div className="dark:bg-black yellow:bg-[yellow] pink:bg-[pink] h-[400px]">
      <Select
        defaultValue={theme}
        style={{ width: 120 }}
        onChange={handleChange}
        options={[
          { value: "dark", label: "深色模式" },
          { value: "yellow", label: "黄色模式" },
          { value: "pink", label: "粉色模式" },
        ]}
      />
    </div>
  );
}

export default Index;
